<template>
	<view class="home">
		<!-- 使得select bar正好处在胶囊位置中间 -->
		<view class="select-bar-wrapper" :style="{ top: selectBarTop + 'px' }">
			<SelectTabbar ref="selectTabbarRef" :select-data="tabs" @tab-click="handleTabClick" :tab-item-style="tabItemStyle" :current-index="1" />
		</view>

		<swiper class="home-swiper" :current="currentIndex" :indicator-dots="false" :autoplay="false" :duration="600" @change="handleChange">
			<swiper-item>
				<view class="swiper-item" v-if="currentIndex === 0">
					<!-- follow list顶部站位 -->
					<view :style="{ paddingTop: systemInfo.statusBarHeight + systemInfo.navBarHeight + 'px' }"></view>
					<view class="follow-list">
						<template v-for="(item, index) in followHistory" :key="index">
							<FollowCard :card-detail="item" />
						</template>
					</view>
				</view>
			</swiper-item>

			<swiper-item>
				<view class="swiper-item item-player">
					<VideoPlayer v-if="currentIndex === 1" :video-data="homeVideoData" @followClick="handleFollowClick" @likeClick='handleLikeClick' needVideoBottom />
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import FollowCard from '@/components/follow-card/follow-card.vue';
	import VideoPlayer from '@/components/video-player/video-player.vue';
	import SelectTabbar from '@/components/select-tabbar/select-tabbar.vue';
	import useCommonStore from '@/stores/common/common';
	import useHomeStore from '@/stores/home/home.js';
	import { storeToRefs } from 'pinia';
	import { computed, nextTick, onMounted, ref } from 'vue';

	// - data
	const selectTabbarRef = ref(null);
	const currentIndex = ref(1);
	const selectBarTop = ref(0);
	const tabs = ref([
		{ label: '在追', value: 0 },
		{ label: '推荐', value: 1 }
	]);
	const tabItemStyle = {
		fontSize: '32rpx',
		marginRight: '60rpx'
	};

	// - store
	const commonStore = useCommonStore();
	const homeStore = useHomeStore();
	const { systemInfo, followHistory } = storeToRefs(commonStore);
	const { homeVideoData } = storeToRefs(homeStore);

	// - methods
	// 滑动页改变select tabbar的索引
	const handleChange = (e) => {
		nextTick(() => {
			currentIndex.value = e.detail.current;
			selectTabbarRef.value?.handleUpdateCurrentIndex(e.detail.current);
		});
	};
	// 切换select tabbar的索引时改变滑动页
	const handleTabClick = ({ index }) => {
		currentIndex.value = index;
	};
	// 收藏
	const handleFollowClick = (item,type) => {
		for (const it of homeVideoData.value) {
			if (it.skit_id == item.skit_id) {
				if (it.detail[0].isFollow == 0) {
					it.detail[0].isFollow = 1;
					commonStore.rememberFollowHistoryData(item.detail[0]);
				} else if (it.detail[0].isFollow == 1) {
					it.detail[0].isFollow = 0;
					commonStore.removeFollowHistoryData(item.detail[0]);
				}
			}
		}
	};
	
	//点赞
	const handleLikeClick = (item)=>{
		
	}
	
	// - lifecycle
	function setupInit() {
		homeStore.fetchHomeVideoAction();
	}
	setupInit();
	onMounted(() => {
		selectBarTop.value = systemInfo.value.statusBarHeight + systemInfo.value.capsuleMidHeight + systemInfo.value.capsuleHeight / 2 - 10;
	});
</script>

<style lang="scss">
	.home {
		height: 100%;
		background: linear-gradient(145deg, rgb(45, 0, 0), #000000, #000000, #000000);

		.select-bar-wrapper {
			position: fixed;
			top: 0;
			display: flex;
			justify-content: center;
			width: 100%;
			z-index: 99;
		}

		.home-swiper {
			height: 100%;

			.swiper-item {
				height: 100%;
			}

			.follow-list {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-column-gap: 20rpx;
				grid-row-gap: 40rpx;
				box-sizing: border-box;
				padding: 35rpx 35rpx 0 35rpx;
			}
			.item-player {
				background-color: #000000;
			}
		}
	}
</style>
